<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./styles/index.css" />
  <title>Document</title>
</head>

<body>
  <div id="app" class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>1</td>
            <td>语文</td>
            <td class="red">46</td>
            <td><a href="#">删除</a></td>
          </tr>
          -->
        </tbody>

        <tfoot>
          <tr>
            <td colspan="5">
              <span class="total">总分：246</span>
              <span style="margin-left: 50px" class="average">平均分：79</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">姓名：</div>
        <div class="input">
          <input type="text" placeholder="请输入姓名" class="username" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" class="subject" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" class="score" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit">添加</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const list = [
      { name: '古丽扎娜', subject: '语文', score: 20 },
      { name: '佟丽丫丫', subject: '数学', score: 99 },
      { name: '马尔扎哈', subject: '英语', score: 70 },
    ]
    //     1. 有渲染功能，根据提供的数据先渲染页面
    // 2. 有计算功能，可以计算总分和平均分
    // 3. 有新增功能，输入相关数据可以渲染页面，如果为空，则提示不能输入
    // 4. 有删除功能，点击删除链接，可以删除当前数据
    // 5. 必须采取 操作数组形式完成以上功能，不允许操作DOM节点增删改查



    let tbody = document.querySelector('tbody')
    // const tbody = document.querySelector('tbody')
    const total = document.querySelector('.total')
    const average = document.querySelector('.average')
    //     1. 有渲染功能，根据提供的数据先渲染页面
    // 渲染函数
    const render = function () {
      let sum = 0
      // list数组对象的数据渲染到页面 遍历数组对象 forEach方法
      // list.forEach(function (item, index) {
      //   // console.log(item) 获取到每一条数据
      //   // 在页面中新建一个tr标签
      //   const tr = document.createElement('tr')
      //   tr.innerHTML = `
      //   <td>${item.name}</td>
      //       <td>${item.subject}</td>
      //       <td class="red">${item.score}</td>
      //       <td><a href="#">删除</a></td>
      //   `
      //   sum += item.score
      //   // 给父级增加子节点
      //   tbody.append(tr)
      //   total.innerHTML = `总分：${sum}`
      //   average.innerHTML = `平均分：${sum / list.length}`
      // })



      // ------------------------------------map方法
      const newList = list.map(function (item, index) {
        // console.log(item) item是list中的每一组数据
        const tr = document.createElement('tr')
        tr.innerHTML = `
            <td>${item.name}</td>
              <td>${item.subject}</td>
              <td class="red">${item.score}</td>
              <td><a data-id="${index}" href="#">删除</a></td>
          `
        // console.log(tr)
        // console.log(item.score)
        sum += item.score
        // console.log(sum)
        return `<tr>${tr.innerHTML}</tr>`
      })
      // console.log(newList)
      tbody.innerHTML = newList.join('')
      // 2. 有计算功能，可以计算总分和平均分
      total.innerHTML = `总分：${sum}`
      if (sum == 0) {
        average.innerHTML = `平均分：0`
        return false
      }
      average.innerHTML = `平均分：${sum / newList.length}`
      // tbody = document.querySelector('tbody')
      // del()

    }
    render()



    // 3. 有新增功能，输入相关数据可以渲染页面，如果为空，则提示不能输入
    // 点击添加 可以新增数据 并渲染到页面
    const btn = document.querySelector('.submit')


    // console.log(btn)
    btn.addEventListener('click', function () {
      const username = document.querySelector('.username')
      const subject = document.querySelector('.subject')
      const score = document.querySelector('.score')
      // console.log('1')
      const uval = username.value.trim()
      const suval = subject.value.trim()
      const scval = score.value.trim()
      if (!uval || !suval || !scval) {
        alert('不能为空')
        return false
      }
      // const obj = {
      //   name: uval,
      //   subject: suval,
      //   score: scval
      // }
      // console.log(obj)
      list.push({
        name: uval,
        subject: suval,
        score: +scval
      })

      render()
      username.value = ''
      subject.value = ''
      score.value = ''
    })


    // 4. 有删除功能，点击删除链接，可以删除当前数据
    // function del() {
    // const delt = document.querySelectorAll('tr a')
    // console.log(delt)
    tbody.addEventListener('click', function (e) {
      console.log('xixi')
      if (e.target.tagName === 'A') {
        const result = confirm('删吗')
        result && list.splice(e.target.dataset.id, 1)
        render(list)
      }
    })
    // }

  </script>
</body>

</html>